<template>
	<view class="container">
		<view class="" style="width: 100%;background-color: #FFFFFF;padding-top:10px ;">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" class="searchInput" placeholder-class="placeholder" placeholder="搜索职位/公司" confirm-type="search"
				 :adjust-position="false" v-model="searchText" @input="check"/>
				<button type="primary" style="height: 100%;position: absolute;right: 0;line-height: 32px;z-index: 999;" @tap="searchFun">搜寻</button>
			</view>
		</view>

		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="item.id == TabCur ? 'text-green cur' : ''" v-for="(item, index) in tabList"
				 :key="index" @tap="tabSelect(item.id)" :data-id="item.id">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>

		<!-- 
			tab内容部分 -->
		<view v-if="taskList.length === 0">
			<Blank :TabCur="TabCur" />
		</view>
		<view v-if="TabCur === 0">
			<messageBox :lists="taskList"></messageBox>
		</view>
		<view v-if="TabCur === 1">
			<messageBox :lists="holdList"></messageBox>
		</view>
		<view v-if="TabCur === 2">
			<messageBox :lists="receviewList"></messageBox>
		</view>
		<view v-if="TabCur === 3">
			<messageBox :lists="successList"></messageBox>
		</view>
		<view v-if="TabCur === 4">
			<messageBox :lists="failList"></messageBox>
		</view>
	</view>
</template>

<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	import blank from "./components/Blank";
	import messageBox from "./components/messageBox.vue"
	import {
		enroll_list
	} from "../../api/user.js"
	export default {

		components: {
			blank,
			messageBox

		},
		data() {
			return {
				TabCur: 0,
				tabList: [{
						id: 0,
						name: "全部"
					},
					{
						id: 1,
						name: "等待邀请"
					},
					{
						id: 2,
						name: "待面试"
					},
					{
						id: 3,
						name: "入职成功"
					},
					{
						id: 4,
						name: "入职失败"
					},
				],
				taskList: [],
				holdList: [],
				receviewList: [],
				successList: [],
				failList: [],
				showList: []

			};
		},
		mounted() {
			this.getenrollList()
		},

		methods: {
			tabSelect(id) {
				console.log(id)
				this.current = id
				if (id == 1) {
					this.holdList = this.showList.filter(item => {
						return item.job_status == 1
					})
				} else if (id == 2) {
					this.receviewList = this.showList.filter(item => {
						return item.job_status == 2
					})
				} else if (id == 3) {
					this.successList = this.showList.filter(item => {
						return item.job_status == 3
					})
				} else if (id == 4) {
					this.failList = this.showList.filter(item => {
						return item.job_status == 4
					})
				} else {
				}
				this.TabCur = id;
				this.scrollLeft = (id - 1) * 60;
			},
			getenrollList() {
				enroll_list().then(res => {
					this.taskList = res.data
					this.showList = this.taskList
				})
			},
			check(e){
				if(e.detail.value === ''){
					this.getenrollList()
				}
			},
			searchFun(e) {
				var search = this.searchText
				this.showList = []
				if (search.length != 0) {
					this.resList = []
					this.taskList.filter((data, index) => {
						Object.keys(data).some((key, index) => {
							if (String(data[key])
								.toLowerCase()
								.indexOf(search) > -1) {
								this.resList.push(index)
							}
						});
					});
					this.resList = [...new Set(this.resList)]
					this.resList.forEach(item => {
						this.taskList.forEach((items, index) => {
							if (item === index + 1) {
								this.showList.push(items)
								this.tabSelect(0)
								this.taskList = this.showList
							}
						})
					})
				} else {
					this.showList = this.taskList
				}

			},

		}
	};
</script>

<style scoped>
	page {
		background-color: #FFFFFF;
		padding-bottom: 20px;
	}

	.round {
		width: 90%;
		height: 32px;
		background-color: #F5F5F5;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		position: relative;
	}

	.cuIcon-search {
		margin-left: 8px;
		color: #f;
	}

	.search-form input {
		width: 100%;
		z-index: 99;
		padding: 0 10px;
	}

	.search-form::placeholder,
	input.searchinput::placeholder {
		color: #b9deff;
	}
</style>